<template>
  <el-dialog
    v-model="dialogVisible"
    :title="title"
    :width="width"
    :class="[`custom-alert-${type}`, customClass]"
    :before-close="handleBeforeClose"
  >
    <!-- 内容区域 -->
    <div class="alert-content">
      <!-- 图标插槽 -->
      <slot name="icon">
        <el-icon v-if="iconType" :size="iconSize" :color="iconColor" class="alert-icon">
          <component :is="iconComponent" />
        </el-icon>
      </slot>

      <!-- 内容插槽 -->
      <div class="alert-message">
        <slot name="default">
          <div v-html="content"></div>
        </slot>
      </div>
    </div>

    <!-- 底部按钮 -->
    <template #footer>
      <div class="alert-footer">
        <el-button
          v-if="showCancel"
          :size="buttonSize"
          :loading="cancelLoading"
          @click="handleAction('cancel')"
        >
          {{ cancelText }}
        </el-button>
        <el-button
          :type="confirmButtonType"
          :size="buttonSize"
          :loading="confirmLoading"
          @click="handleAction('confirm')"
        >
          {{ confirmText }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed } from 'vue'
import {



  CircleCloseFilled,
  WarningFilled,
  InfoFilled
} from '@element-plus/icons-vue'

const props = defineProps({
  modelValue: Boolean,
  title: {
    type: String,
    default: '提示'
  },
  content: String,
  type: {
    type: String,
    default: 'warning', // warning | danger | info
    validator: (v) => ['warning', 'danger', 'info'].includes(v)
  },
  width: {
    type: String,
    default: '500px'
  },
  confirmText: {
    type: String,
    default: '确定'
  },
  cancelText: {
    type: String,
    default: '取消'
  },
  buttonSize: {
    type: String,
    default: 'default'
  },
  showCancel: {
    type: Boolean,
    default: true
  },
  iconSize: {
    type: Number,
    default: 28
  },
  beforeClose: Function
})

const emit = defineEmits(['update:modelValue', 'confirm', 'cancel'])

const dialogVisible = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
})

const confirmLoading = ref(false)
const cancelLoading = ref(false)

const iconMap = {
  warning: WarningFilled,
  danger: CircleCloseFilled,
  info: InfoFilled
}

const iconComponent = computed(() => iconMap[props.type] || WarningFilled)
const iconColor = computed(() => {
  const colors = {
    warning: '#e6a23c',
    danger: '#f56c6c',
    info: '#909399'
  }
  return colors[props.type]
})

const confirmButtonType = computed(() => {
  return props.type === 'danger' ? 'danger' : 'primary'
})

const handleAction = async (action) => {
  try {
    if (props.beforeClose) {
      if (action === 'confirm') confirmLoading.value = true
      if (action === 'cancel') cancelLoading.value = true
      
      const allowClose = await props.beforeClose(action)
      if (allowClose === false) return
    }

    emit(action)
    dialogVisible.value = false
  } finally {
    confirmLoading.value = false
    cancelLoading.value = false
  }
}

const handleBeforeClose = (done) => {
  emit('cancel')
  done()
}
</script>

<style lang="scss" scoped>
.alert-content {
  display: flex;
  align-items: flex-start;
  padding: 20px;

  .alert-icon {
    flex-shrink: 0;
    margin-right: 16px;
  }

  .alert-message {
    flex: 1;
    color: #606266;
    line-height: 1.6;
    font-size: 14px;

    :deep(strong) {
      color: v-bind(iconColor);
      font-weight: 500;
    }
  }
}

.alert-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

// 不同类型样式
.custom-alert-warning {
  .el-dialog__header {
    color: #e6a23c;
  }
}

.custom-alert-danger {
  .el-dialog__header {
    color: #f56c6c;
  }
}

.custom-alert-info {
  .el-dialog__header {
    color: #909399;
  }
}
</style>